<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择位置</title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=feOy08GjBOLC83Ty77FIO4TdGQPhU3uO"></script>
		<style type="text/css">
	       #container{
	           width: 782px;
	           height: 440px;
           	   overflow: hidden;
	       }
	       .layui-form-item {
			    margin-bottom: 0;
			}
			.layui-form-item {
			    clear: both;
			}
			.layui-inline {
			    margin-bottom: 5px;
			    margin-right: 10px;
			}
			.layui-inline {
			    vertical-align: middle;
			}
			.layui-inline {
			    position: relative;
			}
			.layui-inline {
			    display: inline-block;
			}
			.layui-input {
			    display: block;
			    width: 100%;
			    padding-left: 10px;
			}
			.layui-input {
			    height: 32px;
			    line-height: 1.3;
			    border-width: 1px;
			    border-style: solid;
			    background-color: #fff;
			    border-radius: 2px;
			}
			.layui-btn {
				margin-left: 10px;
			    transition: none;
			}
			.layui-btn {
			    display: inline-block;
			    height: 32px;
			    line-height: 32px;
			    background-color: #009688;
			    color: #fff;
			    white-space: nowrap;
			    text-align: center;
			    font-size: 12px;
			    border: none;
			    border-radius: 2px;
			    cursor: pointer;
			}
			.layui-field-title {
			    border-width: 1px 0 0;
			}

			.layui-elem-field {
			    padding: 0;
			    border-style: solid;
			}
			fieldset {
			    display: block;
			    margin-inline-start: 2px;
			    margin-inline-end: 2px;
			    padding-block-start: 0.35em;
			    padding-inline-start: 0.75em;
			    padding-inline-end: 0.75em;
			    padding-block-end: 0.625em;
			    min-inline-size: min-content;
			}
			.layui-elem-field legend {
			    margin-left: 20px;
			    padding: 0 10px;
			    font-size: 12px;
			    font-weight: 600;
			}
			legend {
			    display: block;
			    padding-inline-start: 2px;
			    padding-inline-end: 2px;
			    border-width: initial;
			    border-style: none;
			    border-color: initial;
			    border-image: initial;
			}
		</style>
	</head>
	<body>
                        <div class="layui-form-item">
				            <div class="layui-inline">
				                <input id="warehouseAddress" class="layui-input" type="text" placeholder="输入地址"/>
				            </div>
				            <div class="layui-inline">
				                <button id="btnSearch" type="button" class="layui-btn" onclick="btnSearch()">搜索</button>
				                <button id="confirm" type="button" class="layui-btn" onclick="confirm()">确定</button>
				            </div>
				            <div class="layui-inline">
				                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
							    	<legend>经度：<span id="longitude">0</span></legend>
							  	</fieldset>
				            </div>
				            <div class="layui-inline">
				                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
							    	<legend>维度：<span id="latitude">0</span></legend>
							  	</fieldset>
				            </div>
                        </div>
        <div id='container'></div>
	</body>
	<script type="text/javascript">
		function getUrlParam(name) {
		    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		    var r = window.location.search.substr(1).match(reg);
		    if (r != null) {
		        return unescape(r[2]);
		    } else {
		        return null;
		    }
		};

	    function GetUrlByParamName(name){
	        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	        var URL =  decodeURI(window.location.search);
	        var r = URL.substr(1).match(reg);
	        if(r!=null){
	            //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
	            return  decodeURI(r[2]);
	        };
	        return null;
	    };

		var warehouseAddress = GetUrlByParamName("warehouseAddress")
		$("#warehouseAddress").val(warehouseAddress)

	    var map = new BMapGL.Map('container');
		map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
	    map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 12);
	    //创建地址解析器实例
	    var myGeo = new BMapGL.Geocoder();

	    //点击地图
        map.addEventListener('click', function(e){
            //清除地图上所有的覆盖物
            map.clearOverlays();
            var pt = e.latlng;
            $("#longitude").text(pt.lng)
            $("#latitude").text(pt.lat)
            var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
            map.addOverlay(marker);
            myGeo.getLocation(pt, function(rs){
                var addComp = rs.addressComponents;
                $('#warehouseAddress').val(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
            })
        })

        //初始化
	    if(warehouseAddress != null && warehouseAddress != ''){
		    // 将地址解析结果显示在地图上，并调整地图视野
		    myGeo.getPoint(warehouseAddress, function(point){
		        if(point){
		            map.centerAndZoom(point, 16);
		            map.addOverlay(new BMapGL.Marker(point, {title: warehouseAddress}))
		            $("#longitude").text(point.lng)
		            $("#latitude").text(point.lat)
		        }else{
		            alert('您选择的地址没有解析到结果！');
		        }
		    }, '')
	    }

	    //点击搜索
	    function btnSearch(){
		    myGeo.getPoint($("#warehouseAddress").val(), function(point){
		        if(point){
		            map.centerAndZoom(point, 16);
		            map.addOverlay(new BMapGL.Marker(point, {title: $("#warehouseAddress").val()}))
		            $("#longitude").text(point.lng)
		            $("#latitude").text(point.lat)
		        }else{
		            alert('您选择的地址没有解析到结果！');
		        }
		    }, '')
	    }

	    function confirm(){
	    	parent.BasicWarehouseInfoDlg.data.warehouseAddress = $("#warehouseAddress").val();//地址
	    	parent.BasicWarehouseInfoDlg.data.longitude = $("#longitude").text();//经度
	    	parent.BasicWarehouseInfoDlg.data.latitude = $("#latitude").text();//维度
	    	var Index = parent.layer.getFrameIndex(window.name);
	        parent.layer.close(Index);
	    }

	    //返回按钮
	    function backupPage(){
	    	var Index = parent.layer.getFrameIndex(window.name);
	        parent.layer.close(Index);
	    }
	</script>
</html>
